<template>
  <div style="height:900px">
    <router-view />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{userObj.name}}</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="openElDialog">操作按钮</el-button>
      </div>
      <div style="width:120px;float: left;">
        <!-- <img src="userObj.img"> -->
        <el-image style="width: 100px; height: 100px" :src="userObj.userImg" :fit="fit"></el-image>
      </div>
      <div style="width:300px;float: left;left:100px;position: relative;">
        <div>编号:{{userObj.account}}</div>
        <div>部门:{{userObj.departmentName}}</div>
        <div>职位:{{userObj.role}}</div>
        <div>电话:{{userObj.phone}}</div>
        <div>邮箱:{{userObj.email}}</div>
      </div>
    </el-card>
    <!-- <el-button type="text"
               @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->

    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" width="30%">
      <div class="demo-input-size">
        <el-form :model="copyUserObj">
          <el-form-item label="用户编号" :label-width="formLabelWidth">
            <el-input placeholder="请输入编号" size="small" v-model="copyUserObj.account" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input placeholder="请输入电话" size="small" v-model="copyUserObj.phone" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="用户邮箱" :label-width="formLabelWidth">
            <el-input placeholder="请输入邮箱" size="small" v-model="copyUserObj.email" clearable>
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="用户部门"
                        :label-width="formLabelWidth">
            <el-input placeholder="请输入部门"
                      size="small"
                      v-model="copyUserObj.departmentName"
                      clearable>
            </el-input>
          </el-form-item> -->
          <el-form-item label="用户部门" :label-width="formLabelWidth">
            <template>
              <el-select v-model="copyUserObj.departmentName" placeholder="请选择部门" @change="departmentChange">
                <el-option v-for="(item,index) in departmentList" :key="index" :value="item.departmentName">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <!-- <el-form-item label="职位"
                        :label-width="formLabelWidth">
            <el-input placeholder=""
                      size="small"
                      v-model="copyUserObj.role"
                      clearable>
            </el-input>
          </el-form-item> -->
          <el-form-item label="用户职位" :label-width="formLabelWidth">
            <template>

              <el-select v-model="copyUserObj.role" placeholder="请选择" @change="roleChange()">
                <el-option v-for="(item,index) in roles" :key="index" :value="item.role">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveUser">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <el-tabs type="border-card" style="position: relative;top:20px" @tab-click="handleClick">
      <el-tab-pane label="参加的培训" name="first" style="position:static">
        <el-form :inline="true" :model="trainSearch" class="user-search">

          <template>
            <el-select v-model="comment" placeholder="选择培训状态" @change="trainStatusChange">
              <el-option v-for="(item,index) in trainStatus" :key="index" :value="item.comment">
              </el-option>
            </el-select>
          </template>
          <el-form-item label="">
            <div class="block">
              <span class="demonstration">设置默认时间</span>
              <el-date-picker v-model="timeValue" type="datetime" placeholder="选择日期时间" default-time="12:00:00"
                @change="showtime">
              </el-date-picker>
            </div>
          </el-form-item>

          <el-form-item label="">
            <el-input size="small" v-model="trainSearch.trainName" placeholder="培训标题"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button v-on:click="backHistory">取消</el-button>
        </div>
        <div
          style="height:200px;width:90%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);left:50px;position: absoulte;top:60px"
          v-for="(trainItem,index) in train" :key="index">
          <div style="float: left;width:25%;top:20px;position:relative;left:25px">
            <el-image style="width: 100px; height: 100px" :src="trainItem.coverUrl" :fit="fit"></el-image>
          </div>
          <div style="float: left;width:35%;top:20px;position:relative;left:25px">
            <div>
              <h3>{{trainItem.trainName}}</h3>
            </div>
            <div>
              <h5>培训描述:{{trainItem.des}}</h5>
            </div>

            <div>
              <h5>报名截止:{{trainItem.lastTime.split("T")[0]}}</h5>

              <div style="position: static;">
                <el-button type="success" round v-if="trainItem.isSuccess == 1 ">
                  认证中
                </el-button>
                <el-button type="success" round v-if="trainItem.isSuccess == 2" @click="goTrain(trainItem.id)">进入培训
                </el-button>
                <el-button type="success" round v-if="trainItem.isSuccess == 3" @click="goTest(trainItem.id)">
                  开始考试
                </el-button>
                <el-button type="success" round v-if="trainItem.isSuccess == 4">未通过
                </el-button>

                <el-button type="success" round v-if="trainItem.isSuccess == 5">通过培训
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>


      <!-- ... -->
      <el-tab-pane label="展示课程" name="second" style="position:static">
        <el-form :inline="true" :model="courseSearch" class="user-search">


          <el-form-item label="">
            <el-input size="small" v-model="courseSearch.courseTitle" placeholder="课程标题"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="search1">搜索</el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: center-down">
          <el-button v-on:click="backHistory">取消</el-button>
        </div>
        <div
          style="height:200px;width:90%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);left:50px;position: absoulte;top:60px"
          v-for="(courseItem,index) in course" :key="index">
          <!-- <div style="float: left;width:25%;top:20px;position:relative;left:25px">
            <el-image style="width: 100px; height: 100px" :src="trainItem.coverUrl" :fit="fit"></el-image>
          </div> -->
          <!-- 0000000000000000000 -->
          <div style="float: left;width:25%;top:20px;position:relative;left:25px">
            <div>
              <h3>{{courseItem.courseTitle}}</h3>
            </div>
            <div>
              <h4>课程描述：{{courseItem.courseDes}}</h4>
            </div>

            <div>
              <h5>课程进行状态：{{courseItem.courseStatus1}}</h5>
              <button>进入课程{{courseItem.id}}</button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import userApi from '@/api/user'
  import departmentApi from '@/api/department'
  import roleApi from '@/api/role'
  export default {
    data() {
      return {
        userId: '',
        userObj: {},
        copyUserObj: {},
        trainSearch: {
          isSuccess: 0,
          lastTime: '',
          trainName: '',
          userId: 0,
        },

        // ---------------------
        courseSearch: {
          courseTitle: '',
          courseDes: '',
          courseStatus1: '',
          courseIsNeed: '',
          userId: 0,
        },
        // ------------------
        trainStatus: [],
        comment: '', //被选中的状态文字
        timeValue: '',
        train: [],
        // ---------------
        course: [],
        // ---------------
        activeName: '',
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        formLabelWidth: '120px',
        departmentList: [],
        departmentNames: '',
        fit: '',
        roles: [],
      }
    },
    watch:{
      userId:{
        deep:true,
        handler:function (newV,oldV){
          //获得所有的课程状态
          this.findAllTrainIsSuccess()
          //找到用户信息
          this.findUserMsg()
          this.findUserAllTrain()
          this.findAllCourse()
        }
      }

    },
    created() {
      console.log("路由", this.$route);
      this.userId = this.$route.query.userid
      if (this.userId == '' || this.userId == null) {
        let user = JSON.parse(localStorage.getItem("userdata"))
        this.userId = user.id
        this.trainSearch.userId = user.id
        this.courseSearch.userId = user.id
        this.train = []
        console.log(user);
      }

      this.trainSearch.userId = this.$route.params.userid

      this.courseSearch.userId = this.$route.params.userid
      //获得所有的课程状态
      this.findAllTrainIsSuccess()
      //找到用户信息
      this.findUserMsg()
      this.findUserAllTrain()
      this.findAllCourse()
      console.log(this.userId)
    },
    methods: {
      //通过用户Id获得课程信息
      findAllCourse() {
        this.$axios.post('api/user/findUserCourse/' + this.userId).then(res => {
          console.log('课程信息', res.data);
          this.course = res.data.data
        }).catch()
      },

      //通过用户id获得查找得课程
      findSomeCourse() {
        this.$axios.post('api/user/findUserSomeCourse', this.courseSearch)
          .then(
            res => {
              console.log('部分课程信息', res.data);
              this.course = res.data.data
            }
          ).catch()
      },
      //获得用户的信息
      findUserMsg() {
        userApi
          .findUserMsg(this.userId)
          .then((response) => {
            this.userObj = response.data
            this.copyUserObj = response.data
          })
          .catch()
      },

      //通过用户id 获取他的参加培训的信息
      findUserAllTrain() {
        userApi.findUserAllTrain(this.trainSearch).then((response) => {
          console.log('用户培训信息', response)
          this.train = response.data
        })
      },
      //获得全部培训状态
      findAllTrainIsSuccess() {
        userApi
          .findAllTrainIsSuccess()
          .then((response) => {
            this.trainStatus = response.data
            console.log('全部状态', this.trainStatus)
          })
          .catch()
      },
      //选中状态
      trainStatusChange(comment) {
        for (const key in this.trainStatus) {
          if (this.trainStatus[key].comment == comment) {
            this.trainSearch.isSuccess = this.trainStatus[key].status
            console.log(this.trainStatus[key].status)
          }
        }
      },
      //时间
      showtime(time) {
        console.log(time)
        this.trainSearch.lastTime = time
      },
      //搜索方法
      search() {
        this.findUserAllTrain()
      },
      search1() {
        this.findSomeCourse()
      },
      backHistory() {
        // this.$router.back() //返回上一层
        window.history.back()
      },
      //保存用户方法
      saveUser() {
        console.log(this.copyUserObj)
        userApi
          .updateUser(this.copyUserObj)
          .then((response) => {
            this.$message({
              type: 'success',
              message: response.data.message,
            })
          })
          .catch((e) => {})
        this.dialogFormVisible = false
        this.findUserMsg()
      },
      //获得所有部门信息
      findAllDepartment() {
        departmentApi
          .findAllDepartment()
          .then((response) => {
            console.log('所有部门', response)
            this.departmentList = response.data
          })
          .catch()
      },
      // 打开弹窗
      openElDialog() {
        this.dialogFormVisible = true
        this.findAllDepartment()
        this.getAllRole()
      },
      //获得当前选择的部门
      departmentChange(department) {
        // console.log(department)
        for (const key in this.departmentList) {
          // console.log(this.departmentList[key].departmentName)
          if (
            this.departmentList[key].departmentName ==
            this.copyUserObj.departmentName
          ) {
            this.copyUserObj.departmentId = this.departmentList[key].id
            console.log(this.copyUserObj.departmentId)
          }
        }
      },
      handleClick() {},
      fit() {},

      //获得当前选择的角色
      roleChange(role) {
        for (const key in this.roles) {
          if (this.roles[key].role == this.copyUserObj.role) {
            this.copyUserObj.roleId = this.roles[key].id
            console.log(this.copyUserObj.roleId)
            this.copyUserObj.role = this.copyUserObj.role
          }
        }
      },
      //获取所有角色
      getAllRole() {
        roleApi
          .findAllRole()
          .then((response) => {
            this.roles = response.data
            console.log('所有角色', this.roles)
          })
          .catch()
      },
      goTest(tarinId1) {
        console.log(tarinId1);
        this.$router.push({
          name: 'exam',
          params: {
            "tarinId": tarinId1
          }
        })
      },
      goTrain(tarinId) {
        console.log(tarinId);
        this.$router.push({
          path: '/catalog_progress/catalog_progress',
          query: {
            "trainid": tarinId
          }
        })
      }
    },
  }

</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
    height: 250px;
  }

</style>
